<template>
  <div>
    <el-form :inline="true"  class="demo-form-inline">

  <el-form-item>
    <el-button type="primary" @click="addAnn()">添加新的分类</el-button>
  </el-form-item> 



   <el-table
    :data="Data"
    border
    style="width:600px">
    <el-table-column
      fixed
      prop="id"
      label="分类id"
      width="200">
    </el-table-column>
    <el-table-column
      prop="name" 
      label="分类名"
      width="200">
      
    </el-table-column>
  
  
    
    <el-table-column

      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="toEditor(scope.row)">修改</el-button></el-button>
        <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-form>



<el-dialog
  title="添加新的分类"
  :visible.sync="dialogVisible"
  :before-close="handleClose">
  

<el-form :label-position="labelPosition" label-width="80px">
  <el-form-item label="分类名">
   <el-input v-model="name"></el-input>
  </el-form-item>
</el-form>

    <el-button @click="noadd" >取 消</el-button>
   
    <el-button type="primary" @click="add()">确 定</el-button>
  </span>
</el-dialog>


<el-dialog
  title="修改分类"
  :visible.sync="dialogVisible1"
  :before-close="handleClose">
  

<el-form :label-position="labelPosition" label-width="80px">
  <el-form-item label="修改分类名">
    <el-input
  v-model="up.name">
</el-input>
  </el-form-item>
</el-form>

    <el-button @click="noUpdate" >取 消</el-button>
    <el-button type="primary" @click="updateBlog()">确 定</el-button>
  </span>
</el-dialog>


  </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
 data() {
      return {
        // 旧分类名
        oldname:"",
        // 修改的数据
        up:{
           id:"",
           name:"" 
        },
        name:"",
        // 公告处理
        announcement:{
            id:"",
            content:""
        },

       

        
        // 通过的验证字段
        isaudit:false,
         labelPosition: 'left',

        // 数据集合
        Data:[],

        // 显示提示框(查看的)
         dialogVisible: false,
        //  显示提示框（编辑的）
        dialogVisible1:false,
      }
    },
    mounted() {
        this.getClassify()
    },
    methods: {
        // 取消添加
        noadd(){
            this.name=""
            this.dialogVisible=false
        },
        // 修改
        toEditor(e){
            this.up.name=e.name
            this.oldname=e.name
            this.up.id=e.id
            this.dialogVisible1=true
        },
        // 开始添加新的公搞
        add(){

            if(this.name==""){
                return this.$message.error("添加分类不能为空");
            }
            this.$API.blog.addClassifys(this.name).then((e)=>{
             this.$message({
          message: "添加成功",
          type: 'success'
        });
       this.name=""
       this.dialogVisible=false
        }).catch((e)=>{
          this.$message.error("添加失败");
        })
       
        this.getClassify()
        },
        // 添加新的公告的显示
        addAnn(){
            this.dialogVisible=true
        },

      // 删除分类
      del(e){
          this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.$API.blog.delClassifys(e.id).then(()=>{
             this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getClassify()
          }).catch((e)=>{
             this.$message({
            type: 'error',
            message: e
          });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 排序条件
      changeCondition(e){
        this.condition=e
        console.log(this.condition);
      },
      // 排序类型
      changeSort(e){
        this.sort=e
        console.log(this.sort);
      },
      // 确认修改
      updateBlog(){
      if(this.oldname==this.up.name){
        return   this.$message({
          message: "未修改",
          type: 'warning'
        });
      }
        this.$API.blog.updateClassifys(this.up).then((e)=>{
             this.$message({
          message: "修改成功",
          type: 'success'
        });
       this.dialogVisible1=false
        }).catch((e)=>{
          this.$message.error("修改失败");
        })
       
        this.getClassify()
      },
      // 取消修改
      noUpdate(){
        this.dialogVisible1 = false
       this.up.id=""
       this.up.name=""
      },






        // 页面初始化的数据
        async getClassify(){

            const result =await  this.$API.blog.getClassifys()
            console.log(result);
           if(result.code==200){
            this.Data=result.data
           }
        },
       async onSubmit() {
        this.getClassify()
      },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
               this.announcement.id=""
       this.announcement.content=""
            done();
          })
          .catch(_ => {});
      }
    }
  
}
</script>

<style>
.el-pagination{
    margin-top: 50px;
}


</style>